<template>
	<view class="app">
		<view class="panel">
			<view class="query">	
				<view class="date" @click="showSelectCity">选择城市</view>
				<view class='date' @click="openCalendar2">{{ startDate+' 至 '+endDate }}</view>		
				<view class="btn" @click.stop="getData()">查看</view>
			</view>
		</view>
		<niceui-popup-select ref="showCity" :columns="cityList" :selectValue="cityId" :is-search="false" :option="{label:'desc', value:'site_id'}" @confirm="confirmCity"></niceui-popup-select>
		<liu-calendar-date ref="calendar2" isRange @checked='getDate2'></liu-calendar-date>
				 
		<view class="panel" style="overflow-x: auto;">
			<view class="table">
				<view class="row header">
					<view class="cell">排名</view>
					<view class="cell">城市</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;">订单</text>
						<text>注册</text>
					</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;">流水</text>
						<text>客单价</text>
					</view>
					<view class="cell">加钟</view>
					<view class="cell">退款</view>
					<view class="cell">收益</view>
				</view>
				<view class="row body total">
					<view class="cell">汇总</view>
					<view class="cell">*</view>
					<view class="cell">
						<text>{{total.num - total.refoundNum}}</text>
						<text>{{total.reguser}}</text>
					</view>
					<view class="cell">
						<text>￥{{total.money}}</text>
						<text>￥{{(total.money / (total.num - total.refoundNum)).toFixed(0)}}</text>
					</view>
					<view class="cell">
						<text>￥{{total.clock}}</text>
						<text>{{(total.clock / (total.money - total.fare) * 100).toFixed(1)}}%</text>
					</view>
					<view class="cell">
						<text>{{total.refoundNum}}单</text>
						<text>{{(total.refoundNum / total.num * 100).toFixed(1)}}%</text>
					</view>
					<view class="cell">{{total.profit.toFixed(1)}}</view>
				</view>
				<view class="row body" v-for="(item,index) in data">
					<view class="cell">{{index+1}}</view>
					<view class="cell">{{item.cityname}}</view>
					<view class="cell">
						<text>{{item.oCount - Number(item.refund?item.refund.refund_num:0)}}</text>
						<text>{{item.user?item.user.user:0}}</text>
					</view>
					<view class="cell">
						<text>￥{{Number(item.city_money)}}</text>
						<text>￥{{(item.city_money / (item.oCount - Number(item.refund?item.refund.refund_num:0))).toFixed(0)}}</text>
					</view>
					<view class="cell">
						<text>￥{{Number(item.clock?item.clock.money:0)}}</text>
						<text>{{(Number(item.clock?item.clock.money:0) / (item.city_money - item.city_fare)* 100).toFixed(1)}}%</text>
					</view>
					<view class="cell">
						<text>{{Number(item.refund?item.refund.refund_num:0)}}单</text>
						<text>{{(Number(item.refund?item.refund.refund_num:0) / item.oCount * 100).toFixed(1)}}%</text>
					</view>
					<view class="cell">￥{{Number(item.city_profit)}}</view>
				</view>
			</view>	
		</view>
		
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {

		data() {
			return {
				cityList:[],
				cityId:[],
				startDate:'',
				endDate:'',
				data:[],
				total:{money:0,num:0,clock:0,refoundMoney:0,refoundNum:0,profit:0,reguser:0}
			}
		},
		onLoad() {
			that=this;
			const tiemtemp=Math.round(new Date().getTime()/1000);
			const date=that.comm.formatTime(tiemtemp);
			that.startDate=`${date.year}-${date.month}-${date.day}`;
			that.endDate=`${date.year}-${date.month}-${date.day}`;
			let city=[];
			this.comm.http('/api/tool/loadcity').then(res=>{
				for (let item of res.data) {
					city.push({
						site_id:String(item.site_id),
						desc:item.desc
					});
					that.cityId.push(String(item.site_id));
				}
				that.cityList=city;
				that.getData();
			});
			
			
			
		},
		methods: {
			//打开选择器
			showSelectCity(){
				this.$refs.showCity.showPopup()
			},
			
			confirmCity(value,data) {
				that.cityId=value;
				this.$refs.showCity.closePopup()
			},

			openCalendar2() {
				this.$refs.calendar2.open()
			},
			//日期区间选择成功
			getDate2(e) {
				if(e.value.length<1){
					return;
				}
				if(e.value.length>=2){
					this.startDate=e.value[0];
					this.endDate=e.value[1];
				}else{
					this.startDate=e.value[0];
					this.endDate=e.value[0];
				}
				// this.getData();
			},
			getCityName(id){
				let city='';
				for (let item of that.cityList) {
					if(item.site_id==id){
						city=item.desc;
						break;
					}
				}
				return city;
			},
			getItemData(clockData,id){
				let data=null;
				for (let item of clockData) {
					if(item.website_id==id){
						data=item;
						break;
					}
				}
				return data;
			},
			getData(){
				let citylist=[];
				for (let item of this.cityId) {
					citylist.push(item);
				}
				Comm.http('/api/tool/cityOrd',{
					title:'',
					start:this.startDate,end:this.endDate,
					city:citylist
				},'POST').then(res=>{
					let data=res.data;
					let list=[];
					const total={money:0,num:0,clock:0,refoundMoney:0,refoundNum:0,profit:0,reguser:0,fare:0};
					for (let item of data.order) {
						item.cityname=that.getCityName(item.website_id);
						item.clock=that.getItemData(data.clock,item.website_id);
						item.refund=that.getItemData(data.refund,item.website_id);
						item.user=that.getItemData(data.user,item.website_id);
						// item.oCount-=Number(item.refund?item.refund.refund_num:0);
						list.push(item);
						total.money+=Number(item.city_money);
						total.num+=Number(item.oCount);
						total.fare+=Number(item.city_fare);
						total.clock+=Number(item.clock?item.clock.money:0);
						total.refoundNum+=Number(item.refund?item.refund.refund_num:0);
						total.refoundMoney+=Number(item.refund?item.refund.refund:0);
						total.profit+=Number(item.city_profit);
						total.reguser+=Number(item.user?item.user.user:0);
					}
					that.data=list;
					that.total=total;
				});
			}
		}
	}
</script>

<style lang="scss">
	.query{
		display: flex;  justify-content: center;
		.date{padding:4px 0; border-bottom: 1px solid #999999; margin-right: 16px;}
		.btn{
			padding: 4px 3vw; text-align: center; border: 1px solid #666; border-radius: 5px;
		}
	}
	.table{
		display: table;
		width: 100%;
		border-collapse:collapse;table-layout:fixed;

		.row{
			display: table-row;
			border-bottom: #dddddd 1px solid;
			
			.cell{
				display: table-cell; 
				text-align: center;
				vertical-align: middle;
				padding: 8px 0;
			}
			.cell>text{
				display: block;
			}
			.cell>text:nth-child(1){
				padding-bottom: 4px;
				border-bottom: 1px solid #f0f0f0;
			}
			.cell>text:nth-child(2){
				padding-top: 4px;
			}
			
			.cell:nth-child(1),.cell:nth-child(3){
				width: 40px;
				/* max-width:100px; */overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 
			}
			.cell:nth-last-child(){
				text-align: right;
			}
		}
		.body{
			.cell{
				font-size: 12px;
			}
		}
		.header{
			background-color: #f0f0f0;
		}
		.total{
			color: #ff5500;
		}
	}

	
</style>
